<template>
	<view class="loginbody" :style="'height:'+windowHeight+'px'">
		<u-navbar leftText=" " leftIconColor="#fff" title="登录" bgColor="rgba(37, 99, 233, 0)" :placeholder="true"
			:safeAreaInsetTop="true" :autoBack="true">
		</u-navbar>
		<div class="logo">
			<!-- <image src="https://cdn.hifreeter.com/xiaochengxu/static/login/logo2.png" mode="widthFix"></image> -->
		</div>
		<div class="account">
			<div class="info">账号</div>
			<input type="text" v-model="data.name" border="none">
		</div>
		<div class="account">
			<div class="info">密码</div>
			<input type="password" v-model="data.password" border="none">
		</div>
		<button class="button" type="default" @click="login">登录</button>
	</view>
</template>

<script>
	import {
		logins
	} from '@/config/api.js'
	export default {
		data() {
			return {
				showSex: false,
				windowHeight: 0,
				data: {
					"name": "",
					"password": ""
				},
			};
		},
		mounted() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight
				}
			})
		},
		methods: {
			login() {
				if (!this.data.name) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return
				}
				if (!this.data.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				logins(this.data).then(res => {
					if (res.code == 200) {
						var data2 = 'user' + res.data.id
						uni.setStorageSync('userType', res.data.type)
						uni.setStorageSync('imuser', data2)
						uni.setStorageSync('userid', res.data.id)
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/home/home'
							})
						}, 2000)
					}
				}).catch(err => {

				})
			}

		},
	};
</script>
<style scoped lang="scss">
	.loginbody {
		width: 750rpx;
		background: url(https://cdn.hifreeter.com/xiaochengxu/static/login/splash-bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.logo {
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		margin-top: 200rpx;
		margin-bottom: 130rpx;
		height: 128rpx;

		image {
			width: 500rpx;
		}
	}

	.button {
		width: 622rpx;
		height: 80rpx;
		background: #6CD8D1;
		border-radius: 20rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		margin-top: 32rpx;
	}

	.button_by_pwd {
		width: 670rpx;
		height: 80rpx;
		border-radius: 10rpx;
		opacity: 1;
		border: 1rpx solid #6CD8D1;
		background-color: rgba(0, 0, 0, 0);
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #6CD8D1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		margin-top: 32rpx;
	}

	.account {
		width: 622rpx;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		margin-top: 64rpx;

		.info {
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		input {
			margin-left: 32rpx;
			width: 522rpx;
			border-bottom: 1rpx solid rgba(255, 255, 255, 1);
			height: 60rpx;
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-indent: 16rpx;
		}
	}
</style>
